<style type="text/css">
    .section { height:2em; }
</style>

<script type="text/javascript">
	$(function() {
		$("#accordion").accordion();
	});
	</script>



<div class="demo">

<div id="accordion" style="width:200px">
	<h3><a href="#">Section 1</a></h3>
	<div class="section">
                    Text regarding<br/>
                    Section 1
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div class="section">
                    Text regarding<br/>
                    Section 2
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div class="section">
                    Text regarding<br/>
                    Section 3
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div class="section">
                    Text regarding<br/>
                    Section 3
	</div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->